<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件学习</title>
    <!-- 引入 elementUI 样式 -->
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <!-- 引入 vue 的js文件： elementUI基于Vue开发，必须在elementUI的js文件之前引入 -->
    <script src="../js/vue.js"></script>
    <!-- 引入elementUI 组件库 -->
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
    <div id="app" >
        <!-- 在此输入elementUI组件代码 -->
        <!-- 在此输入elementUI组件代码 -->
        <el-container>
            <el-aside width="200px">
                <!-- default-active="2"  默认选中第一个子菜单, 也就是index=2 的菜单-->
                <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <!--选项图标-->
                            <i class="el-icon-s-platform"></i>
                            <span>友情链接</span>
                        </template>
                        <!--菜单项组-->
                        <el-menu-item-group>
                            <!--菜单项-->
                            <el-menu-item index="1-1">
                                <!--超链接-->
                                <!--target ： 指向显示页面的框架 right是iframe的name值-->
                                <!--点击超链接可以在右侧iframe中显示-->
                                <a href="http://itcast.cn" target="right">传智播客</a>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <a href="http://itheima.com" target="right">黑马程序员</a>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-3">选项3</el-menu-item>
                            <el-menu-item index="1-4">你好吗</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <!--菜单项不可点击-->
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <iframe name="right" width="100%" height="580px" frameborder="0"></iframe>
            </el-container>
        </el-container>


    </div>
</body>

<script type="text/javascript">
    //elementUI 基于vue2.0开发，所有elementUI组件必须在vue的管理区域。
    new Vue({
        el: "#app"
    });
</script>
</html>